<template>
  <!-- 安全设置 -->
  <div class="set_styl">
    <div class="set_top">
      <div class="set_left">
        <img class="img_styl" src="@/assets/images/goods_module2.png" alt="" srcset="">
        <div class="user_info">
          <div>{{ store_userInfo.docCustomerCredential.entName }}</div>
          <div class="phone_styl">{{ store_userInfo.phone }}</div>
        </div>
      </div>

      <div class="set_right">
        <img class="img_styl1" src="@/assets/images/set_tip.png" alt="" srcset="">
        <img class="img_styl2" src="@/assets/images/myXing.png" alt="">
      </div>
    </div>

    <div class="set_bottom">
      <Tabs v-model="typeContent">
        <TabPane label="登录密码" name="password"></TabPane>
        <TabPane label="修改手机号" name="phone"></TabPane>
        <!-- <TabPane
          label="支付密码"
          name="pay"
        ></TabPane> -->
      </Tabs>
      <div class="edit_styl1" v-if="typeContent == 'password'">
        <div class="edit_item">
          <div class="edit_title">当前手机号</div>
          <Input v-model="store_userInfo.phone" readonly placeholder="请输入手机号" style="width: 300px" />
        </div>
        <div class="edit_item">
          <div class="edit_title">新密码</div>
          <Input v-model="addFather1.password" placeholder="请输入密码" style="width: 300px" />
        </div>
        <div class="edit_item">
          <div class="edit_title">确认新密码</div>
          <Input v-model="addFather1.passwordAgain" placeholder="请再次输入密码" style="width: 300px" />
        </div>
        <div class="edit_item">
          <div class="edit_title">短信验证码</div>
          <Input v-model="addFather1.smsCode" placeholder="请输入短信验证码" style="width: 300px" />
          <div class="code_btn" @click="getCodeFun('password')">
            {{ codeNum }}
            <Spin fix v-if="spinShow">
              <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
            </Spin>
          </div>
        </div>
        <div class="btn_styl">
          <Button @click="handleSubmit('password')" :loading="btnLoading" type="primary" long>保存</Button>
        </div>
      </div>

      <div class="edit_styl1" v-if="typeContent == 'phone'">
        <div class="edit_item">
          <div class="edit_title">当前手机号</div>
          <Input v-model="store_userInfo.phone" placeholder="请输入手机号" style="width: 300px" readonly />
        </div>
        <div class="edit_item">
          <div class="edit_title">短信验证码</div>
          <Input v-model="addFather2.oldSmsCode" placeholder="请输入短信验证码" style="width: 300px" />
          <div class="code_btn" @click="getCodeFun('password')">
            {{ codeNum }}
            <Spin fix v-if="spinShow">
              <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
            </Spin>
          </div>
        </div>
        <div class="edit_item">
          <div class="edit_title">新手机号</div>
          <Input v-model="addFather2.phone" placeholder="请输入新手机号" style="width: 300px" />
        </div>
        <div class="edit_item">
          <div class="edit_title">短信验证码</div>
          <Input v-model="addFather2.smsCode" placeholder="请输入短信验证码" style="width: 300px" />
          <div class="code_btn" @click="getCodeFun('phone')">
            {{ newCodeNum }}
            <Spin fix v-if="newSpinShow">
              <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
            </Spin>
          </div>
        </div>
        <div class="btn_styl">
          <Button @click="handleSubmit('phone')" :loading="btnLoading" type="primary" long>保存</Button>
        </div>
      </div>

      <!-- <div
        class="edit_styl1"
        v-if="typeContent == 'pay'"
      >
        <div class="edit_item">
          <div class="edit_title">当前手机号</div>
          <Input
            v-model="addFather.phone"
            placeholder="请输入手机号"
            style="width: 300px"
          />
        </div>
        <div class="edit_item">
          <div class="edit_title">新支付密码</div>
          <Input
            v-model="value"
            placeholder="请输入支付密码"
            style="width: 300px"
          />
        </div>
        <div class="edit_item">
          <div class="edit_title">短信验证码</div>
          <Input
            v-model="value"
            placeholder="请输入短信验证码"
            style="width: 300px"
          />
        </div>
        <div
          class="btn_styl"
          @click="aaa"
        >保存</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { validatePhoneFun } from "@/tool/myValidator";

export default {
  components: {},
  data() {
    return {
      spinShow: false,
      newSpinShow: false,
      btnLoading: false,
      timer: '',
      newTimer: '',
      codeNum: '获取验证码',
      newCodeNum: '获取验证码',
      addFather1: {},
      addFather2: {},
      typeContent: 'password'
    }
  },
  computed: {
    ...mapGetters(["store_userInfo"])
  },
  mounted() {
  },
  methods: {
    ...mapMutations(["set_userInfo", "set_token"]),
    ...mapActions(["get_userInfo"]),

    // 提交修改信息
    handleSubmit(flag) {
      let data = {};
      let apiName = "";

      if (flag == "password") {
        if (!this.addFather1.password || !this.addFather1.passwordAgain || !this.addFather1.smsCode) {
          this.$Message.error("请输入必填信息!");
          return;
        }
        if (this.addFather1.password != this.addFather1.passwordAgain) {
          this.$Message.error("两次密码输入不一致!");
          return;
        }
        data = {
          id: this.store_userInfo.id,
          phone: this.store_userInfo.phone,
          status: "1",
          type: this.store_userInfo.loginType,
          ...this.addFather1
        };
        apiName = "API_updatePassword";
      } else if (flag == "phone") {
        if (!this.addFather2.oldSmsCode || !this.addFather2.phone || !this.addFather2.smsCode) {
          this.$Message.error("请输入必填信息!");
          return;
        }
        data = {
          id: this.store_userInfo.id,
          oldPhone: this.store_userInfo.phone,
          ...this.addFather2,
          type: this.store_userInfo.loginType
        };
        apiName = "API_updatePhone";
      }

      this.btnLoading = true;
      this.httpGet(this.API[apiName], data)
        .then(res => {
          this.$Message.success("修改成功!");
          this.addFather1 = {};
          this.addFather2 = {};
          this.btnLoading = false;

          if (flag == "password") {
            this.set_token("");
            this.set_userInfo("");
          } else {
            //重新拉取用户信息
            this.get_userInfo();
          }

          clearInterval(this.timer);
          clearInterval(this.newTimer);
          this.codeNum = "获取验证码";
          this.newCodeNum = "获取验证码";
        })
        .catch(err => {
          this.btnLoading = false;
          console.error(err);
        });
    },
    getCodeFun(flag) {
      let data = {};
      if (flag == 'password') {
        if (this.codeNum != "获取验证码") {
          this.$Message.error("请不要重复点击按钮!");
          return;
        }
        this.spinShow = true;
        data = {
          phone: this.store_userInfo.phone,
          status: 10
        };
      }
      if (flag == "phone") {
        if (!validatePhoneFun(this.addFather2.phone)) {
          this.$Message.error("请输入正确的手机号!");
          return;
        }
        if (this.newCodeNum != "获取验证码") {
          this.$Message.error("请不要重复点击按钮!");
          return;
        }
        this.newSpinShow = true;
        data = {
          phone: this.addFather2.phone,
          status: 10
        };
      }
      this.httpGet(this.API.API_sendCodePay, data)
        .then(res => {
          //验证码倒计时
          flag == "phone" ? this.newCodeFun() : this.codeFun();
          this.spinShow = false;
          this.newSpinShow = false;
        })
        .catch(err => {
          this.spinShow = false;
          this.newSpinShow = false;
          console.error(err);
        });
    },
    // 验证码倒计时
    codeFun() {
      // 验证码倒计时
      this.codeNum = 60;
      this.timer = setInterval(() => {
        this.codeNum--;

        if (this.codeNum <= 0) {
          this.codeNum = "获取验证码";
          clearInterval(this.timer);
        }
      }, 1000);
    },
    // 新手机验证码倒计时
    newCodeFun() {
      // 验证码倒计时
      this.newCodeNum = 60;
      this.newTimer = setInterval(() => {
        this.newCodeNum--;

        if (this.newCodeNum <= 0) {
          this.newCodeNum = "获取验证码";
          clearInterval(this.newTimer);
        }
      }, 1000);
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

// spin加载动画
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.code_btn {
  width: 86px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  left: 330px;
  top: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  background-color: #323f54;
  color: #ffffff;
  cursor: pointer;
}

.set_styl {
  width: 100%;
  height: 606px;
  padding: 20px 0;
  background-color: #ffffff;

  .set_top {
    .flex-x();
    width: 944px;
    height: 104px;
    padding: 0 14px;
    margin: 0 auto 22px auto;
    background-image: url("~@/assets/images/set_back.png");

    .set_left {
      .flex-x();

      .img_styl {
        width: 56px;
        height: 56px;
        border-radius: 100px;
      }

      .user_info {
        margin-left: 16px;
        text-align: left;

        .phone_styl {
          margin-top: 6px;
          font-size: 12px;
          color: #999999;
        }
      }
    }

    .set_right {
      .img_styl1 {
        margin-right: 30px;
      }
    }
  }

  .set_bottom {
    padding: 0 32px;

    .edit_styl1 {
      .edit_item {
        .flex-x(flex-start);
        margin-bottom: 16px;
        position: relative;

        .edit_title {
          width: 100px;
          text-align: left;
          margin-right: 20px;
          color: #333333;
        }
      }

      .btn_styl {
        margin: 60px 0 0 130px;
        width: 190px;
        height: 38px;
      }
    }
  }
}
</style>
